<template>
  <div class="form-add assign">
    <div class="form-container">
      <div class="form-header">
        <el-button @click="cancel" size="small">返回</el-button>
        <el-button type="primary" @click="sure" size="small">保存</el-button>
      </div>
      <div class="form-content" style="width: 100%">
        <el-tree
          :data="treeData"
          show-checkbox
          default-expand-all
          node-key="id"
          ref="tree"
          highlight-current
          :default-checked-keys="checkedKeys"
          :props="defaultProps"
        ></el-tree>
      </div>
    </div>
  </div>
</template>
<script>
import { purviewList } from '../../models/fake-data'
export default {
  name: 'Assign',
  props: ['data'],
  data() {
    return {
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      checkedKeys: []
    }
  },
  mounted() {
    console.log("mounted -> this.data", this.data);
    this.allPurview();
  },
  methods: {
    sure: function () {
      let req = {
        ids: [...this.$refs.tree.getCheckedKeys(), ...this.$refs.tree.getHalfCheckedKeys()].join(","),
        PurviewGroupId: this.data.PurviewGroupId,
      }
      this.$message.success('分配权限成功');
      this.$emit('sure') // 保存回调父组件方法
    },

    cancel: function () {
      this.$emit('cancel') // 返回回调父组件方法
    },

    allPurview: function () {
      this.treeData = purviewList;
      this.checkedKeys = [214, 264, 265, 275, 327, 34];
    },
  }
}
</script>
<style lang="scss">
.assign {
  .el-tree-node > .el-tree-node__children {
    // .el-tree-node {
    //   display: flex;
    // }
    .el-tree-node__children {
      display: flex;
      flex-wrap: wrap;
    }
    .el-tree-node__content {
      min-width: 120px;
    }
  }
}
</style>
